import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as actions from './redux/actions';
import './style.scss';
import { Input, Button, Row, Col, Carousel } from 'antd';
import { SearchOutlined } from '@ant-design/icons'
@connect(
  state => ({ user: state.user, author: state.author }),
  dispatch => bindActionCreators(actions, dispatch)
)
class Home extends React.PureComponent {
  goToLogin() {
    this.props.history.push('/login')
  }
  constructor(props) {
    super(props);
    // const {fetchAuthorData} = props;
    // fetchAuthorData();
  }
  render() {
    const contentStyle = {
      height: '460px',
      color: '#fff',
      lineHeight: '460px',
      textAlign: 'center',
      background: '#364d79',
    };
    return (
      <div className="homeBody">
        {/* 顶部导航栏区 */}
        <div className="nav">
          <div className="tools">
            <Input placeholder="请输入" style={{ width: 200 }} className="searchInput" suffix={<SearchOutlined />} />
            <Button shape="round" className="loginButton" onClick={this.goToLogin.bind(this)}>登录</Button>
            <Button type="primary" shape="round">注册</Button>
          </div>
        </div>
        {/* 内容区，需要左右padding */}
        <div className="content">
          {/* 菜单栏和轮播图区 */}
          <Row gutter={10}>
            <Col span={5}>
              <div className="menu">
                <div className="menuTitle"><span>分类</span></div>
                <div style={{ padding: "0 20px" }}>
                  <div className="cateTitle">课程设计</div>
                  <Row gutter={10} className="menuRow">
                    <Col span={8}>专业名称</Col>
                    <Col span={8}>专业名称</Col>
                    <Col span={8}>专业名称</Col>
                  </Row>
                  <Row gutter={10} className="menuRow">
                    <Col span={8}>专业名称</Col>
                    <Col span={8}>专业名称</Col>
                    <Col span={8}>专业名称</Col>
                  </Row>
                  <div className="cateTitle">高校共享课</div>
                  <Row gutter={10} className="menuRow">
                    <Col span={8}>哲学</Col>
                    <Col span={8}>经济学</Col>
                    <Col span={8}>法学</Col>
                  </Row>
                  <Row gutter={10} className="menuRow">
                    <Col span={8}>教育学</Col>
                    <Col span={8}>工学</Col>
                    <Col span={8}>理学</Col>
                  </Row>
                  <div className="cateTitle">社会实践课</div>
                  <Row gutter={10} className="menuRow">
                    <Col span={8}>传统文化</Col>
                    <Col span={8}>艺术</Col>
                    <Col span={8}>创新</Col>
                  </Row>
                  <Row gutter={10} className="menuRow">
                    <Col span={8}>预防医学</Col>
                    <Col span={8}>农业</Col>
                    <Col span={8}>语言</Col>
                  </Row>
                </div>
              </div>
            </Col>
            <Col span={19}>
              {/* 轮播图 */}
              <Carousel autoplay>
                <div>
                  <h3 style={contentStyle}>1</h3>
                </div>
                <div>
                  <h3 style={contentStyle}>2</h3>
                </div>
                <div>
                  <h3 style={contentStyle}>3</h3>
                </div>
                <div>
                  <h3 style={contentStyle}>4</h3>
                </div>
              </Carousel>
            </Col>
          </Row>
        </div>
      </div>
    )
  }
}
export default Home;